<template>
    <transition name="sideBar">
        <div class="sidebar">
            <div class="ifLogin">
                <p>登陆网易云音乐</p>
                <div class="loginBtn">立即登录</div>
            </div>
            <div class="menuList">
                <div class="menuItem">
                    <i></i><span>我的信息</span>
                </div>
                <div class="menuItem">
                    <i></i><span>会员中心</span>
                </div>
                <div class="menuItem">
                    <i></i><span>商城</span>
                </div>
                <div class="menuItem">
                    <i></i><span>在线听歌免流量</span>
                </div>
            </div>
        </div>
    </transition>
</template>
<script type="text/ecmascript-6">

export default {

}
</script>
<style rel="stylesheet/scss" lang="scss">
.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    transform: translateX(0);
    width: 80%;
    background: #cfcfcf;
    z-index:200;
    .ifLogin {
        height: 3rem;
        background: #000000;
        text-align: center;
        color: #ffffff;
        overflow: hidden;
        p {
            margin-top: 1rem;
        }
        .loginBtn {
            height: 0.6rem;
            line-height: 0.6rem;
            width: 40%;
            margin: .4rem auto 0;
            border: 1px solid #ffffff;
            border-radius: .4rem;
        }
    }
    .menuList {
        .menuItem {
            height: 0.8rem;
            line-height: 0.8rem;
            background: #ffffff;
        }
    }
}
.sideBar-enter{
    transform: translateX(-100%);
}
.sideBar-enter-active {
    transition: all .3s;
}
.sideBar-leave-active {
    transition: all .3s;
    transform: translateX(-100%);    
}
</style>
